import { lazy } from "react";
import { createBrowserRouter } from 'react-router-dom'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';

const App = lazy(() => import('../App'))
const Home = lazy(() => import('../pages/home/Index'))
const Table = lazy(() => import('../pages/table/Index'))
const Table1 = lazy(() => import('../pages/table/table1/Index'))
const Table2 = lazy(() => import('../pages/table/table2/Index'))
const User = lazy(() => import('../pages/user/Index'))
const Order = lazy(() => import('../pages/order/Index'))

type homeRouter = {
    path: string;
    element: JSX.Element;
    children?: homeRouter;
    icon?: any;
    label?: string;
}[]

export const homeRoutes: homeRouter = [
    {
        path: '/home',
        element: <Home />,
        icon: <MenuFoldOutlined />,
        label: '首页'
    },
    {
        path: '/table',
        element: <Table />,
        icon: <UploadOutlined />,
        label: '表格',
        children: [
            {
                path: '/table/table1',
                element: <Table1 />,
                icon: <VideoCameraOutlined />,
                label: '表格1',
            },
            {
                path: '/table/table2',
                element: <Table2 />,
                icon: <MenuUnfoldOutlined />,
                label: '表格2',
            },
        ]
    },
    {
        path: '/user',
        element: <User />,
        icon: <UserOutlined />,
        label: '用户'
    },
]

const routes: homeRouter = [
    {
        path: '/',
        element: <App />,
        children:homeRoutes
    },
    {
        path: '/order',
        element: <Order />
    }
]
const router = createBrowserRouter(routes)

export default router